<template>
  <div class="newslist">
    <!-- 轮播图开始 -->
    <div class="my-swpier" v-if="id==1">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in swiperImage" :key="index">
          <img width="100%" v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 轮播图结束 -->
    <!-- 新闻列表开始 -->
    <div class="list">
        <van-row 
        class="my-row" 
        type="flex" 
        justify="space-between"
        v-for="item in newsList"
        :key="item.newsId"
        @click="goToNewsDetails(item.newsId)"
        >
            <van-col span="6">
                <van-image
                width="100%"
                height="100%"
                lazy-load
                :src="item.pic"
                />
            </van-col>
            <van-col span="17" class="info-right">
                <h3>{{item.title}}</h3>
                <div class="info">
                    <span>{{item.time}}</span>
                    <span>{{item.src}}</span>
                </div>
            </van-col>
        </van-row>
    </div>
    <!-- 新闻列表结束 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      newsList:[],
      id: this.$route.params.id,
      swiperImage: [
        "https://n.sinaimg.cn/baby/transform/500/w300h200/20200511/cba8-itmiwry8212454.jpg",
        "https://p.ivideo.sina.com.cn/video/335/495/776/335495776.jpg",
        "https://n.sinaimg.cn/default/feedbackpics/transform/116/w550h366/20180517/2uns-harvfhu4568971.png",
        "https://n.sinaimg.cn/baby/transform/500/w300h200/20200511/4378-itmiwry8730963.jpg",
      ],
    };
  },
  watch: {
    $route: {
      handler() {
        this.id = this.$route.params.id;
        this.getNewsList();
      },
      //一开始就监听
      immediate: true,
      //深度监听
      deep: true,
    },
  },
  methods: {
    getNewsList() {
      this.$http("/getNewsList", "get", {
        id: this.id,
      })
        .then((res) => {
          console.log(res);
          this.newsList = res.list;
        })
        .catch((err) => {
          console.log(err);
          return err;
        });
    },
    goToNewsDetails(id){
        this.$router.push({path:'/newsdetails/'+id})
    }
  },
  mounted() {
    this.getNewsList();
  },
};
</script>

<style lang='scss' scoped>
.newslist {
    margin-top: 84px;
    //轮播图开始
  .my-swpier{
      width: 100%;
      height: 150px;
      .van-swipe{
          height: 150px;
      }
  }
  //轮播图结束
  //新闻列表开始
  .list{
      .my-row{
          padding: 10px;
          width: 100%;
          height: 85px;
          border-bottom: 1px solid #999;
          box-sizing: border-box;
      }
      .van-col{
          height: 100%;
      }
      .info-right{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          h3{
              font-weight: 700;
              font-size: 14px;
              line-height: 20px;
          }
          .info{
              font-size: 10px;
              color: #999;
              span:nth-child(2){
                  margin-left: 10px;
              }
          }
      }
  }
  //新闻列表结束
}
</style>